<div class="pick_lucky" style="position: relative; top: 140px;">
<% case @type_id.to_i %>
<% when 1%>
  <div>
    <table class="table table-stripped" style="border: 1px solid white;" rules="none">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div" style="border: solid 1px white; width: 150px;word-break:break-all;"><%= "#{user.phone[0..2]}****#{user.phone[-4..-1]}" %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_1', @users.pluck(:phone).map{|p| "#{p[0..2]}****#{p[-4..-1]}" if p.present? }.join(",") %>
    <br/>
    <div id="load_div_1" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_1" style="width: 0%; height: 100%; background-color:  #f4b942; border-radius: 20px;" ></div>
    </div>
  </div>
  </div>
  <%= hidden_field_tag 'hidden_type', @type_id %>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 4);
    var random_string_string = $('#hidden_user_name_1').val();
    var random_string_array = random_string_string.split(',');
    var count_down = 10000;
    var origin_count_down = 10000;
    var type_id = $('#hidden_type').val();
    var $load_inner_div = $('#load_inner_div_1')
    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: type_id},
          success: function(){}
        })
      }
    }
  </script>
<% when 2 %>
  <div>
    <table class="table table-stripped" rules="none">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div1" style="border: solid 1px white; width: 150px;word-break:break-all;"><%= "#{user.phone[0..2]}****#{user.phone[-4..-1]}" %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_2', @users.pluck(:phone).map{|p| "#{p[0..2]}****#{p[-4..-1]}" if p.present?}.join(",") %>
    <div id="load_div_2" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_2" style="width: 0%; height: 100%; background-color:  #f4b942; border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 4);
    var count_down = 10000;
    var origin_count_down = 10000;
    var $load_inner_div = $('#load_inner_div_2')
    var random_string_string = $('#hidden_user_name_2').val();
    var random_string_array = random_string_string.split(',');

    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div1').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);

          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: '2'},
          success: function(){}
        })
      }
    }
  </script>

<% when 3 %>
  <div>
    <table class="table table-stripped" rules="none">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div2" style="border: solid 1px white; width: 150px;word-break:break-all;"><%= "#{user.phone[0..2]}****#{user.phone[-4..-1]}" %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_3', @users.pluck(:phone).map{|p| "#{p[0..2]}****#{p[-4..-1]}" if p.present?}.join(",") %>
    <div id="load_div_3" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_3" style="width: 0%; height: 100%; background-color:  #f4b942; border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 10);
    var count_down = 10000;
    var origin_count_down = 10000;
    var $load_inner_div = $('#load_inner_div_3')
    var random_string_string = $('#hidden_user_name_3').val();
    var random_string_array = random_string_string.split(',');

    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div2 ').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);

          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: '3'},
          success: function(){}
        })
      }
    }
  </script>
<% when 4 %>
  <div>
    <table class="table table-stripped" rules="none">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div" style="border: solid 1px white; width: 150px; word-break:break-all;"><%= "#{user.phone[0..2]}****#{user.phone[-4..-1]}" %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_1', @users.pluck(:phone).map{|p| "#{p[0..2]}****#{p[-4..-1]}" if p.present?}.join(",") %>
    <br/>
    <div id="load_div_1" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_1" style="width: 0%; height: 100%; background-color:  #f4b942; border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 20);
    var random_string_string = $('#hidden_user_name_1').val();
    var random_string_array = random_string_string.split(',');
    var count_down = 10000;
    var origin_count_down = 10000;
    var size = $('#choosen_number').val();
    var $load_inner_div = $('#load_inner_div_1')
    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: 4},
          success: function(){}
        })
      }
    }
  </script>
<% when 5 %>
  <div>
    <table class="table table-stripped" rules="none">
      <% @users.limit(20).each_slice(4) do |users| %>
        <tr>
          <% users.each do |user| %>
            <td class="roll_div" style="border: solid 1px white; width: 150px; word-break:break-all;"><%= "#{user.phone[0..2]}****#{user.phone[-4..-1]}" %></td>
          <% end %>
        </tr>
      <% end %>
    </table>
    <%= hidden_field_tag 'hidden_user_name_1', @users.pluck(:phone).map{|p| "#{p[0..2]}****#{p[-4..-1]}" if p.present?}.join(",") %>
    <br/>
    <div id="load_div_1" style="width: 100%; height: 30px; border: solid 1px;border-radius: 20px;" >
      <div id="load_inner_div_1" style="width: 0%; height: 100%; background-color:  #f4b942; border-radius: 20px;" ></div>
    </div>
  </div>
  <script type="text/javascript">
    var roll_timer = setInterval(roll_div, 10);
    var random_string_string = $('#hidden_user_name_1').val();
    var random_string_array = random_string_string.split(',');
    var count_down = 10000;
    var origin_count_down = 10000;
    var size = $('#choosen_number').val();
    var $load_inner_div = $('#load_inner_div_1')
    function roll_div(){
      var random_val = '';
      if(count_down > 0) {
        $('.roll_div').each(function(){
          random_val = random_string_array[Math.floor(Math.random()*random_string_array.length)];
          $(this).text(random_val);
          count_down = count_down - 1;
          var load_p_i = (origin_count_down - count_down) / (origin_count_down / 100);
          var load_p_s = load_p_i.toString() + "%";
          $load_inner_div.css('width', load_p_s);
        })
      } else {
        clearTimeout(roll_timer);
        $.ajax({
          url: '/luckies/gen_lucky_user',
          type: 'post',
          data: {type: 5},
          success: function(){}
        })
      }
    }
  </script>
<% end %>
<style type="text/css">
   .table-stripped tr, td {
     border: 1px solid white;
   }
   .table-stripped tr {
     border: 1px solid white;
   }
   .table-stripped {
     border: 1px solid white;
   }
</style>
<%= link_to '返回', setting_luckies_path, style: "position: relative; top: 140px;" %>
